<template>
  <div>
    <header><van-nav-bar title="神领快递" safe-area-inset-top /></header>
    <main>
      <div class="title">
        <span>手机号登录</span>
        <span @click="$router.push('/login2')">账号登录<van-icon name="play" /></span>
      </div>
      <van-form @submit="onSubmit">
        <div class="moblie">
          <van-field
            v-model="mobile"
            name="moblie"
            placeholder="请输入手机号"
            :style="{
              borderBottom: mobileError
                ? '1px solid #EF4F3F'
                : '1px solid #f4f4f4',
            }"
          />
          <span v-if="mobileError" style="color: #ef4f3f; font-size: 14px"
            >手机号输入有误! 请重新输入</span
          >
        </div>
        <div class="sms">
          <van-field
            v-model="sms"
            center
            clearable
            placeholder="请输入短信验证码"
            name="sms"
            :style="{
              borderBottom: smsError
                ? '1px solid #EF4F3F'
                : '1px solid #f4f4f4',
            }"
          >
            <template #button>
              <button class="smsBtn" ref="smsBtn" @click="getSms">
                {{ smsMsg }}
              </button>
            </template>
          </van-field>
          <span v-if="smsError" style="color: #ef4f3f; font-size: 14px"
            >验证码输入有误! 请重新输入</span
          >
        </div>
        <div style="margin: 16px">
          <van-button
            class="loginBtn"
            round
            block
            type="info"
            native-type="submit"
            :disabled="!sms || !mobile"
            :style="{
              backgroundColor: !sms || !mobile ? '#FADCD9' : '#EF4F3F',
              marginTop: '50px',
            }"
            >登录</van-button
          >
        </div>
      </van-form>
    </main>
  </div>
</template>
<script>
export default {
  name: "MobileLogin",
  data() {
    return {
      sms: "",
      mobile: "",
      smsMsg: "获取验证码",
      smsFlag: false,
      smsError: false,
      mobileError: false,
    };
  },
  created() {},
  computed: {},
  methods: {
    onSubmit(values) {
      const reg =
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (!reg.test(this.mobile)) {
        this.mobileError = true;
      } else {
        this.mobileError = false;
      }
      if (this.sms.length < 4) {
        this.smsError = true;
      } else {
        this.smsError = false;
      }
      if (this.smsError || this.mobileError) {
        return;
      } else {
        this.$toast.success("登录成功");
      }
    },
    getSms() {
      if (this.smsFlag) {
        return;
      }
      this.smsFlag = true;
      this.$refs.smsBtn.style.color = "#ccc";
      let num = 60;
      this.smsMsg = `${num--}秒后重新获取`;
      let id = setInterval(() => {
        this.smsMsg = `${num--}秒后重新获取`;
        if (num < 0) {
          clearInterval(id);
          this.smsFlag = false;
          id = "";
          this.smsMsg = "重新验证码";
        }
      }, 1000);
    },
  },
};
</script>
<style lang='less'  scoped>
.van-hairline--bottom::after{
  border: none;
}
.smsBtn {
  padding: 0 15px;
  border: 0;
  border-left: 1px solid #f4f4f4;
  width: 100px;
  height: 26px;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
  white-space: nowrap;
}
header {
  width: 100vw;
  height: 50px;
  position: fixed;
  top: 43px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
main {
  margin-top: 128px;
  padding: 0 33px;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    span:first-child {
      font-size: 24px;
      font-weight: 700;
      line-height: 33px;
    }
    span:last-child {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      color: #ef4f3f;
    }
  }
  .moblie {
    position: relative;
    .van-field {
      margin-bottom: 20px;
      padding: 20 0px;
    }
    span {
      position: absolute;
      left: 20px;
      bottom: -24px;
      z-index: 9999;
    }
  }
  .sms {
    position: relative;
    span {
      position: absolute;
      left: 20px;
      bottom: -24px;
      z-index: 9999;
    }
  }
  .loginBtn {
    border: 0;
  }
}
</style>
